<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/services.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>

	</head>
	<body>

		<herder>
			<!-- 头部导航栏区域 -->
			<div class="container  py-3 d-flex  justify-content-between flex-md-row flex-column">
				<ul class="list-unstyled d-flex mx-md-0 mx-auto">
					<li>
						<a href="#" class="fa fa-user nav_color">
							<i class="text-muted">Login</i>
						</a>
					</li>
					<li class="mx-3">
						<a href="#" class="fa fa-pencil nav_color">
							<i class="text-muted">Register</i>
						</a>
					</li>
					<li>
						<a href="#" class="fa fa-cart-plus nav_color">
							<i class="text-muted">Checkout</i>
						</a>
					</li>
				</ul>

				<ol class="list-unstyled d-flex mx-md-0 mx-auto ">
					<li class="mx-3">
						<a href="#" class="fa fa-heart nav_color">
							<i class="text-muted">Wishlist</i>
						</a>
					</li>

					<li>
						<a href="#" class="fa fa-angle-down nav_color ">
							<i class="text-muted">USD</i>
						</a>
					</li>
				</ol>

			</div>


			<!-- 头部导航栏搜索框区域 -->
			<div class="" style="background-image: url(images/header_bg.jpg);">
			
				<div class=" " style="background-color: rgba(0,0,0,0.8);">
			
					<div class="container py-4">
			
						<ul class="d-flex justify-content-between align-items-center flex-md-row flex-column mb-0 pl-0">
			
							<li class="">
								<a href="#"><img src="images/logo.png" class="w-100"></a>
							</li>
			
							<li class="form_qu">
								<form class="form-control d-flex justify-content-between " style=" height: 50px; padding-top: 4px; padding-right: 2px;" >
									<input type="text" placeholder="Search" class="border-0" style="outline: none;">
									<button type="" class="border-0 text-muted btn" style="background-color: #E4606D; width: 55px; height: 40px; "><i class="fa fa-search text-white"></i></button>
			
								</form>
							</li>
						</ul>
			
					</div>
			
			
				</div>
			
			</div>

			<!-- 头部导航栏分栏 -->
			<div class="w-100 nav_tou " style="background-color: #E4606D;">

				<div class="navbar navbar-expand-md p-0">
					<button type="button " class="navbar-toggler bg-white ml-auto" data-toggle="collapse" data-target="#meu" style="color: white;">
						<i class="fa fa-bars " style="background-color: #E4606D;"></i>
					</button>


					<div class="collapse navbar-collapse " id="meu">
						<ul class=" list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav "
						 style="">
							<li class="nav-item">
								<a href="index.html" class="nav-link ">Home</a>
							</li>
							<li class="nav-item ">
								<a href="about.html" class="nav-link ">About</a>
							</li>
							<li class="nav-item  ">
								<a href="#" class="nav-link defoult">Services</a>
							</li>
							<li class="nav-item  ">
								<a href="gallery.html" class="nav-link">Gallery</a>
							</li>
							<li class="nav-item  ">
								<a href="blog.html" class="nav-link">Blog</a>
							</li>
							<li class="nav-item  ">
								<a href="shop.html" class="nav-link">Shop</a>
							</li>
							<li class="nav-item  ">
								<a href="contact.html" class="nav-link">Contact</a>
							</li>
							
						</ul>
					</div>

				</div>
			</div>


			<!-- -->

		</herder>


		<!-- 中部的区域 -->
		<mian>

			<div class=" py-5 w-100 " style="background-color: gainsboro;">
				<div class="container text-center">
					<h2 class="m-0" style="color: #E4606D;">Services</h2>
					<hr class="" style="width: 105px; background-color: #E4606D; margin-top: 1px;" />
					<hr class="" style="width: 65px; background-color: #E4606D; margin-top: -12px" />
					<p style="color: #E4606D;">Home<i class="text-dark"> / Services</i></p>
				</div>
			</div>


			<!-- 中部6个指标区域 -->
			<div class="mt-3 mb-3 container">

				<ul class=" row pl-0">
					<li class="col-lg-4 col-md-6 col-12   py-2 ">

						<div class="d-flex justify-content-center">
							<div class="fa fa-university text-center " style="width: 50px; height: 50px; border: 1px solid #E4606D; border-radius: 25px; line-height: 50px; color:#E4606D ;"></div>
						</div>


						<h4 class="d-block text-center mt-3">Quality Work</h4>

						<p class="text-muted text-center mt-2">Omnicos directe desirabilite nov lits es lingua On refus continuar payar
							custos traductores solmen pronunciation.</p>

					</li>


					<li class="col-lg-4 col-md-6 col-12   py-2 ">

						<div class="d-flex justify-content-center">
							<div class="fa fa-rocket text-center " style="width: 50px; height: 50px; border: 1px solid #E4606D; border-radius: 25px; line-height: 50px; color:#E4606D ;"></div>
						</div>


						<h4 class="d-block text-center mt-3">Free Delivery</h4>

						<p class="text-muted text-center mt-2">Omnicos directe desirabilite nov lits es lingua On refus continuar payar
							custos traductores solmen pronunciation.</p>

					</li>


					<li class="col-lg-4 col-md-6 col-12   py-2 ">

						<div class="d-flex justify-content-center">
							<div class="fa fa-fighter-jet text-center " style="width: 50px; height: 50px; border: 1px solid #E4606D; border-radius: 25px; line-height: 50px; color:#E4606D ;"></div>
						</div>


						<h4 class="d-block text-center mt-3">24 Hour Support</h4>

						<p class="text-muted text-center mt-2">Omnicos directe desirabilite nov lits es lingua On refus continuar payar
							custos traductores solmen pronunciation.</p>

					</li>


					<li class="col-lg-4 col-md-6 col-12   py-2 ">

						<div class="d-flex justify-content-center">
							<div class="fa fa-podcast text-center " style="width: 50px; height: 50px; border: 1px solid #E4606D; border-radius: 25px; line-height: 50px; color:#E4606D ;"></div>
						</div>


						<h4 class="d-block text-center mt-3">100% Money Back</h4>

						<p class="text-muted text-center mt-2">Omnicos directe desirabilite nov lits es lingua On refus continuar payar
							custos traductores solmen pronunciation.</p>

					</li>


					<li class="col-lg-4 col-md-6 col-12   py-2 ">

						<div class="d-flex justify-content-center">
							<div class="fa fa-truck text-center " style="width: 50px; height: 50px; border: 1px solid #E4606D; border-radius: 25px; line-height: 50px; color:#E4606D ;"></div>
						</div>


						<h4 class="d-block text-center mt-3">Packaging</h4>

						<p class="text-muted text-center mt-2">Omnicos directe desirabilite nov lits es lingua On refus continuar payar
							custos traductores solmen pronunciation.</p>

					</li>


					<li class="col-lg-4 col-md-6 col-12   py-2 ">

						<div class="d-flex justify-content-center">
							<div class="fa fa-bicycle text-center " style="width: 50px; height: 50px; border: 1px solid #E4606D; border-radius: 25px; line-height: 50px; color:#E4606D ;"></div>
						</div>


						<h4 class="d-block text-center mt-3">Fast Delivery</h4>

						<p class="text-muted text-center mt-2">Omnicos directe desirabilite nov lits es lingua On refus continuar payar
							custos traductores solmen pronunciation.</p>

					</li>
				</ul>

			</div>


			<!-- 中部先选卡部分 -->
			<div class="" style="background-image: url(./images/choose_bg.jpg); background-repeat: repeat;">

				<div class="container">

					<ul class="row m-0 ">


						<li class="col-lg-5 col-md-12   py-5">



						</li>


						<li class="col-lg-7 col-md-12 justify-content-center    py-5">

							<p class="font-weight-bold" style="font-size: 25px; color:  #E4606D;">Why<i class="font-weight-bold" style="font-size: ; color: black;">Choose
									Us</i></p>

							<div id="example">

								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left btn-link collapsed" data-toggle="collapse" data-target="#menu1"
										 aria-expanded="false">
											Respecting Your Time<span class="add"></span>
										</button>
									</div>

									<div class="card-body yy collapse" data-parent="#example" id="menu1" style="">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>


								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left btn-link collapsed" data-toggle="collapse" data-target="#menu2"
										 aria-expanded="false">
											Latest In Technology<span class="add"></span>
										</button>
									</div>

									<div class="card-body yy collapse" data-parent="#example" id="menu2" style="">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>


								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left   btn-link" data-toggle="collapse" data-target="#menu3">
											Professional Staff<span class="out"></span>
										</button>
									</div>

									<div class="card-body collapse yy " data-parent="#example" id="menu3">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>

								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left   btn-link" data-toggle="collapse" data-target="#menu4">

											Free Home Dilevery<span class="out"></span>
										</button>
									</div>

									<div class="card-body collapse yy " data-parent="#example" id="menu4">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>


								<div class="card">

									<div class="card-header">
										<button class="btn w-100 text-left   btn-link" data-toggle="collapse" data-target="#menu5">

											High Quality<span class="out"></span>
										</button>
									</div>

									<div class="card-body collapse yy " data-parent="#example" id="menu5">
										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et do
										lore magna aliqua.Lonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
									</div>

								</div>

							</div>

							<script type="text/javascript">
								$(function() {

									$('.collapse').on('hidden.bs.collapse', function() {


										$(this).prev().find('span').prop('class', 'add');

									})


									$('.collapse').on('shown.bs.collapse', function() {


										$(this).prev().find('span').prop('class', 'out');

									})


								})
							</script>


						</li>


					</ul>

				</div>


			</div>


		</mian>


		<!-- 底部区域 -->
		<footer>

			<!-- 中底部的五个导航栏区域 -->
			<div class="w-100 " style="background-color: #E4606D;">

				<div class="container">

					<ul class="row pl-0 d-flex justify-content-center justify-content-sm-center text-center m-0">
						<li class="col-12  py-4 ">

							<span class="font-weight-bold text-center d-block text-center " style="color: white; font-size: 30px;">Our
								Clients</span>

						</li>
						<li class="col-md-2  col-12  py-4 ">
							<a href="#"><img src="./images/partner1.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner2.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner3.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner4.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4">
							<a href="#"><img src="./images/partner5.png"></a>
						</li>
					</ul>

				</div>

			</div>


			<!-- 底部黑色部分的区域 -->
			<div class="" style=" background-color: black;">

				<div class="container">

					<ul class="row m-0 pl-0">
						<li class="col-lg-4 col-md-6 col-12   py-5" style="background-color: black;">

							<img src="images/logo.png" class="">

							<p class="text-white  mt-4" style="font-size: 18px;">It is a long established fact that a reader will be
								distracted by the readable content of a page when looking at its layout.</p>



						</li>
						<li class="col-lg-2 col-md-6 col-12 " style="background-color: black;">
							<p class=" font-weight-bold mt-5" style="font-size: 19px; margin: 0px; color:  #E4606D;">Help</p>


							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Your Beer</p>
								</a>
								<a href="#">
									<p>Customer Service</p>
								</a>
								<a href="#">
									<p>Contact</p>
								</a>
								<a href="#">
									<p>Recent Orders</p>
								</a>

							</div>


						</li>
						<li class="col-lg-2 col-md-6 col-12  py-5" style="background-color: black; margin: 0px;">
							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Links</p>

							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Home</p>
								</a>
								<a href="#">
									<p>Shop</p>
								</a>
								<a href="#">
									<p>404 Page</p>
								</a>
								<a href="#">
									<p>Login</p>
								</a>
							</div>

						</li>
						<li class="col-lg-4 col-md-6 col-12 py-5 " style="background-color: black;">

							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Our Information</p>

							<div class="">
								<i class="fa fa-map-marker  mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">787 Lakeview St. Marion, NC
								</p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; 28752 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-phone t mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">+1800123654789 </p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; +1800123456788 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-envelope mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">Support@Handmade.Net</p>
								<p></p>

							</div>
						</li>
					</ul>

				</div>

			</div>


			<!-- 底部介绍区域的部分 -->
			<ul class="row m-0 p-0">
				<li class="col-md-6 col-12 py-3 text-center " style="background-color:#E4606D ;">
					<p class="text-white mt-2">Copyrights © 2018 All Rights <a href="#" style="color: blue;" class="a_se">Reserved</a> by Himanshusofttech</p>
				</li>

				<li class="col-md-6 col-12 text-center py-3 " style="background-color:#E4606D ;">
					<i class="fa fa-facebook text-white d-block mt-3">
						<i class="fa fa-twitter ml-3"></i>
						<i class="fa fa-google-plus ml-3"></i>
						<i class="fa fa-pinterest-p ml-3"></i>
						<i class="fa fa-linkedin ml-3"></i>
					</i>
				</li>
			</ul>
		</footer>
	</body>
</html>
